<template>
	<view class="page">
		<scroll-view class="page-scroll" scroll-y="true" @scroll="pageScroll" :style="{bottom:pageScrollOffsetBottom+'px'}">
			<view class="dock-placeholder" :style="{height: navBarHeight + 'px'}"></view>
			
			<view v-if="isEmptyCart" class="empty-cart">
				<view class="empty-cart-label">
					<image class="empty-cart-icon" :src="emptyCartConfig.icon"></image>
					<text class="empty-cart-text">{{emptyCartConfig.text}}</text>
				</view>
				
				<view class="nav-btn-list">
					<text class="btn" v-for="(btn, btnIndex) of emptyCartConfig.navBtnList" :key="btnIndex" @tap="emptyCartNavBtn(btn.url)">{{btn.text}}</text>
				</view>
			</view>
			
			<view v-if="!isEmptyCart" class="tpf-cart-list">
				<view class="tpf-cart-item" v-for="(seller,sellerIndex) of cartGoodsList" :key="sellerIndex">
					<tpl-cart-order :shop="seller" :productList="seller.goods" @changerNumber="changerNumber"></tpl-cart-order>
				</view>
			</view>
			
			<view class="recommended-product-list-title">
				<tpf-icon :fontFamily="recommendedProductListTitleConfig.lineIcon.fontFamily" :text="recommendedProductListTitleConfig.lineIcon.text" :textStyle="recommendedProductListTitleConfig.lineIcon.textStyle"></tpf-icon>
				<tpf-icon :vertical="false" :fontFamily="recommendedProductListTitleConfig.recommendIcon.fontFamily" :thumb="recommendedProductListTitleConfig.recommendIcon.thumb" :title="recommendedProductListTitleConfig.recommendIcon.title" :iconStyle="recommendedProductListTitleConfig.recommendIcon.iconStyle" :titleStyle="recommendedProductListTitleConfig.recommendIcon.titleStyle"></tpf-icon>
				<tpf-icon :fontFamily="recommendedProductListTitleConfig.lineIcon.fontFamily" :text="recommendedProductListTitleConfig.lineIcon.text" :textStyle="recommendedProductListTitleConfig.lineIcon.textStyle"></tpf-icon>
			</view>
			
			<tpl-product-list class="recommended-product-list" :columnCount="recommendedProductListConfig.columnCount" :columnGap="recommendedProductListConfig.columnGap" :rowGap="recommendedProductListConfig.rowGap" :leftGap="recommendedProductListConfig.leftGap" :rightGap="recommendedProductListConfig.rightGap" :productList="recommendedProductList"></tpl-product-list>
		</scroll-view>
		
		<!-- 顶部bar -->
		
		<tpf-nav-bar status-bar hasTitle :fixedHeight="navBarConfig.fixedHeight" :title="navBarConfig.title" :right="navBarConfig.right" @getNavBarMaxHeight="getNavBarHeight" @iconTap="navIconTap">
			<view class="nav-bar-bg"></view>
			<view v-if="!isEmptyCart" class="cart-list-right" slot="right">
				<text v-if="!isCartManager" @tap.stop="cartManager">{{navBarConfig.right.btns.manager}}</text>
				<text v-else @tap.stop="cartManager">{{navBarConfig.right.btns.over}}</text>
			</view>
		</tpf-nav-bar>
			
		
		<!-- 购物结算bar -->
		<view class="cart-bottom-bar flex flex-pack-justify flex-align-center" v-if="!isEmptyCart">
			<view class="tpf-cart-bottom-bar-left flex">
				<tpl-check :checked="isAllChecked" @checkTap="checkAllBtnTap"></tpl-check>
				<text class="select-all">全选</text>
			</view>
			<template v-if="!isCartManager">
			<view class="tpf-cart-bottom-bar-center flex flex-1 flex-align-center">
				<view>合计：</view><view class="price">￥<text class="money">{{totalMoney}}</text></view>
			</view>
			
			<!-- <navigator url="/pages/shop/settlement/settlement" class="tpf-cart-bottom-bar-right"></navigator> -->
			<view class="tpf-cart-bottom-bar-right" @tap="goSettlement">
				<text>结算（{{productTotalCount}}）</text>
			</view>
			</template>
			<template v-else>
			<view class="tpf-cart-bottom-bar-delete" @tap="deleteCartGoods">删除</view>
			</template>
		</view>
	</view>
</template>

<script>
	import initConfig from '@/mixins/home/cart/cart.js';
	import data from "@/data/home/cart/cart.js";
	import BigNumber  from "@/common/js/bignumber.js"
	
	export default {
		mixins: [initConfig],
		data() {
			return {
				dockHeight: 0,
				navBarHeight:0,
				cartGoodsList:[],
				isCartManager:false,
				recommendedProductList: [],
				
				pageScrollOffsetBottom : 0
			}
		},
		async created() {
			const recommendedProductListData = data.recommendedProductList();
			this.recommendedProductList = await recommendedProductListData;
			
			const cartList = data.cartGoodsList();
			this.cartGoodsList = await cartList;
			
			this.cartGoodsList.length>0 && this.$nextTick(function(){
				let query = uni.createSelectorQuery().in(this);
				query.select(".cart-bottom-bar").fields({size:true});
				query.exec(data=>{
					this.pageScrollOffsetBottom = data[0].height;
				});
			});
		},
		methods: {
			getNavBarHeight(e) {
				this.navBarHeight = e;
			},
			getDockHeight(e) {
				this.dockHeight = e;
			},
			
			pageScroll(e) {
				this.$refs['dock'].scrollDeltaTo(e.detail.deltaY);
			},
			
			emptyCartNavBtn(url) {
				uni.navigateTo({
					url: url
				});
			},
			cartManager(){
				this.isCartManager=!this.isCartManager;
			},
			checkAllBtnTap(e) {
				if (e) {
					this.cartGoodsList.forEach((seller, sellerIndex) => {
						seller.goods.forEach((goods, goodsIndex) => {
							this.$set(this.cartGoodsList[sellerIndex]['goods'][goodsIndex], 'checked', true);
						});
					});
				} else {
					this.cartGoodsList.forEach((seller, sellerIndex) => {
						seller.goods.forEach((goods, goodsIndex) => {
							this.$set(this.cartGoodsList[sellerIndex]['goods'][goodsIndex], 'checked', false);
						});
					});
				}
			},
			changerNumber(e){
				console.log(e);
				this.cartGoodsList.forEach((seller,sellerIndex)=>{
					seller.id==e.seller_id && seller.goods.forEach((cart,cartIndex)=>{
						if(cart.id == e.cart_id){
							this.cartGoodsList[sellerIndex]['goods'][cartIndex].number = e.number;
						}
					});
				});
			},
			goSettlement(){
				this.$Helper.tpfToast({title:"开发中..."});
			},
			// 删除购物车里面的物品
			deleteCartGoods(){
				this.$Helper.tpfToast({title:"开发中..."});
			},
			navIconTap(e){
				this.$Helper.tpfJump({url:"/pages/ucenter/message-lists/message-lists"});
			}
		},
		computed:{
			getSelectGoodsIds(){
				let goods_ids=[];
				this.cartGoodsList.forEach((seller,sellerIndex)=>{
					seller.goods.forEach((goods,goodsIndex)=>{
						if(goods.checked){
							goods_ids.push(goods.id);
						}
					});
				});
				return goods_ids;
			},
			//判断购物车是否为空，实际判断购物车里面的产品多少
			isEmptyCart(){
				let goodsNumber = 0;
				this.cartGoodsList.forEach((seller,sellerIndex)=>{
					goodsNumber += seller.goods.length;
				});
				
				return goodsNumber==0;
			},
			productTotalCount() {
				let totalCount = 0;
				this.cartGoodsList.forEach(seller => {
					seller.goods.forEach(goods => {
						if (goods.checked) {
							totalCount += 1;
						}
					});
				});
				return totalCount;
			},
			totalMoney() {
				let totalMoney = new BigNumber(0);
				
				this.cartGoodsList.forEach(seller => {
					seller.goods.forEach(goods => {
						if (goods.checked) {
							totalMoney = totalMoney.plus((new BigNumber(goods.goods_price)).multipliedBy(goods.number).toNumber());
						}
					});
				});
				return totalMoney;
			},
			isAllChecked() {
				let isAllChecked = true;
				this.cartGoodsList.forEach(seller => {
					seller.goods.forEach(goods => {
						if (!goods.checked) {
							isAllChecked = false;
						}
					});
				});
				return isAllChecked;
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.nav-bar-bg {
		background-color: $uni-bg-color;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
	.page-scroll {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	.dock {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
	}
	.dock-bg {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: $uni-bg-color;
		// border-width: 1px;
	}
	
	
	.empty-cart {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		
		margin-top: 1px;
		padding-top: $uni-spacing-row-hg;
		padding-bottom: $uni-spacing-row-lg;
		background-color: $uni-bg-color;
	}
	.empty-cart-label {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.empty-cart-icon {
		width: $uni-icon-size-base;
		height: $uni-icon-size-base;
	}
	.empty-cart-text {
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
		margin-left: $uni-spacing-col-base;
	}
	
	.nav-btn-list {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		margin-top: $uni-spacing-row-lg;
	}
	.btn {
		border-width: 1px;
		border-style: solid;
		border-color: $uni-border-color;
		border-radius: 10000px;
		padding-left: $uni-spacing-col-hg;
		padding-right: $uni-spacing-col-hg;
		margin-left: $uni-spacing-col-base;
		margin-right: $uni-spacing-col-base;
		font-size: $uni-font-size-base;
		padding-top: $uni-spacing-row-sm;
		padding-bottom: $uni-spacing-row-sm;
	}
	
	.recommended-product-list-title {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		margin-top: $uni-spacing-row-base;
	}
	.recommended-product-list {
		margin-top: $uni-spacing-row-sm;
	}
	.cart-list-right{
		font-size: $uni-font-size-base;
		padding-right: 16rpx;
	}
	.cart-bottom-bar{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFF;
		height: 100rpx;
		font-size: $uni-font-size-base;
		border-bottom-width: 1px;
		border-bottom-color: #e6e6e6;
		border-bottom-style: solid;
	}
	.select-all{
		padding-left: 10rpx;
	}
	.tpf-cart-bottom-bar-left{
		padding-left: 16rpx;
	}
	.tpf-cart-bottom-bar-center{
		justify-content:flex-end;
		padding-right: 18rpx;
	}
	.tpf-cart-bottom-bar-center .price{
		color: #ff5403; 
	}
	.tpf-cart-bottom-bar-center .money{
		font-size:$uni-font-size-base*1.5;
	}
	.tpf-cart-bottom-bar-right{
		background-color: #ff5403;
		color: #FFF;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 18rpx;
	}
	.tpf-cart-bottom-bar-delete{
		padding: 10rpx 20rpx;
		border-width: 1px;
		border-style: solid;
		border-color: #3C3E49;
		border-radius: 50rpx;
		margin-right: 16rpx;
	}
	.tpf-cart-select-ico{
		padding-right:18rpx;
	}
	.tpf-cart-item{
		font-size: $uni-font-size-base;
		color: #333333;
		background-color:$uni-bg-color-white;
		padding: 20rpx;
		margin: 20rpx 0;
	}
	
</style>
